/**
 * Created by xxx on 2017年9月27日.
 */
var msgParentid = '';
//父组件
var Main = React.createClass({
    //组件初始状态
    getInitialState: function () {
        return {
            imei: suixun.urlpara('imei'),
            deviceData:[],
            babyData: [],
            parentData: [],
            noData: false,
            cardType:''//2.4 13.56 或者不支持更换
        }
    },
    componentDidMount: function () {
        this.getDeviceInfo();//查询设备详情
        this.getBabyInfo();//查询宝贝详情
        this.getParentListInfo();//查询成员管理列表信息
    },

    /**
     * 设备详情
     */
    getDeviceInfo: function () {
        var svar = this;
        var param="param={";
        // param = getJsonDataNotEmpty(param,"simid",""+simid+"");
        param = getJsonDataNotEmpty(param,"imei",""+this.state.imei+"");
        param += "}";
        suixun.ajax(serverUrl+'/deviceManage/queryDevice.json',param,"get",function(data){
            suixun.hideLoding();//隐藏加载中
            if(data.code == 200){
                if(data.info!=null && data.info.length > 0){
                    svar.setState({deviceData:data.info[0]});
                    svar.getcardType(data.info[0].cardid);
                }else{
                    suixun.alert("没有获取到设备相关数据!");
                }
            }else{
                suixun.alert(data.msg);
            }
        });
    },
    /**
     * 获取智能学生证type
     * @param cardid
     */
    getcardType: function (cardid) {
        suixun.ajax(serverUrl+'/deviceManage/get_mdtid_type?cardid='+cardid,'','get',function (data) {
            if(data.code==200&&data.info){
                if(data.info.type=='卫小宝'){//卫小宝:智能学生证自带的考勤卡
                    this.setState({cardType:''});
                }else{
                    this.setState({cardType:data.info.type});
                }
            }
        }.bind(this));
    },
    /**
     * 宝贝详情
     */
    getBabyInfo: function(){
        suixun.showLoding();//显示加载中
        var param="param={";
        param = getJsonDataNotEmpty(param,"mdtid",this.state.imei);
        param += "}";
        var svar= this;
        suixun.ajax(serverUrl+"/studentInfoManage/queryStduent.json",param,"get",function(data){
            if(data.code == 200 && data.info != null){
                // studentId = data.info.objectid;
                svar.setState({babyData:data.info});
            }else{
                suixun.alert("没有获取到宝贝相关数据!");
            }
        });
    },
    /**
     * 成员管理列表信息
     */
    getParentListInfo: function(){
        var param="param={";
        param = getJsonDataNotEmpty(param,"mdtid",this.state.imei+'');
        param += "}";
        var svar = this;
        suixun.ajax(serverUrl+"/parentInfoManage/queryParents.json",param,"get",function(data){
            if(data.code==200 && data.info != null){
                svar.setState({parentData:data.info});
            }else{
                suixun.alert("没有获取到设备成员相关数据!");
                svar.setState({noData:true});
            }

        });
    },
    /**
     * 去详情
     * @returns {XML}
     */
    goDetails: function (){
        window.open('./parentDeviceDetails.html');
    },
    /**
     * 解绑设备
     */
    removeDevice: function (paystatus) {
        var svar = this;
        // if(paystatus != "3"){//去掉已缴费的验证
            suixun.confirm_noTit("是否解绑?",function (data) {
                if(data) {
                    suixun.showLoding();//显示加载中
                    var param = "param={";
                    param = getJsonDataNotEmpty(param, "imei", svar.state.imei);
                    param = getJsonDataNotEmpty(param, "objectid", svar.state.babyData.objectid);
                    param = getJsonDataNotEmpty(param, "peopleid", msgParentid);
                    param += "}";
                    suixun.ajax(serverUrl + '/deviceManage/unbindDevice.json', param, "get", function (data) {
                        suixun.hideLoding(200);//隐藏加载中
                        if (data.code == 200 && data.info != null) {
                            suixun.alert(data.info);
                        } else(
                            suixun.alert(data.msg)
                        )
                    });
                }
            })
        // }
    },
    /**
     * 同步数据——家校通
     * @returns {XML}
     */
    synchronousData: function () {
        var param="param={";
        param = getJsonDataNotEmpty(param,"imei",this.state.imei);
        param += "}";
        suixun.confirm_noTit("是否同步数据?",function (data) {
            if(data){
                suixun.showLoding();//显示加载中
                suixun.ajax(serverUrl+"/deviceManage/synJxtBaby.json",param,"get",function(data){
                    suixun.hideLoding();//隐藏加载中
                    if(data.code == 200){
                        suixun.alert('操作成功!');
                    }else{
                        suixun.alert(data.msg);
                    }
                });
            }
        });
    },
    onClickHidePop: function () {
        $(".changeDevice").hide();
        $(".errorMsg").hide();
        $("#deviceCode").val("");
        $("#deviceType").val("2.4")
    },
    showChangeDevicePop: function () {
        $(".changeDevice").show();
    },
    /**
     * 获取数据
     */
    changeDevice: function () {
        var deviceType = $("#deviceType").val();
        var deviceCode = $("#deviceCode").val();
        if(deviceCode==''){
            suixun.alert('考勤卡号不能为空！');
            return;
        }else if(deviceCode.length != 10 || !/^[1-9]\d*$/.test(deviceCode)){
            suixun.alert('考勤卡号格式不对！');
            return;
        }
        this.cahngeDeviceData(this.state.deviceData.cardid,this.state.cardType,deviceCode,deviceType,true);
        // if(this.state.deviceData.devicetype==2){
        //     suixun.showLoding();//显示加载中
        //     suixun.ajax(serverUrl+'/deviceInitManage/queryDeviceInitList.json','param={pagenumber:1,pagecount:15,"type":"3","batchid":"","status":"","imei":"'+this.state.deviceData.cardid+'"}',"get",function(data){
        //         suixun.hideLoding();//隐藏加载中
        //         if(data.code==200 && data.info.queryresult.length>0){
        //             this.cahngeDeviceData(this.state.deviceData.cardid,data.info.queryresult[0].factory,deviceCode,deviceType,true);
        //         }else{
        //             suixun.ajax(serverUrl+'/deviceInitManage/queryDeviceInitList.json','param={pagenumber:1,pagecount:15,"type":"4","batchid":"","status":"","imei":"'+this.state.deviceData.cardid+'"}',"get",function(data){
        //                 suixun.hideLoding();//隐藏加载中
        //                 if(data.code==200 && data.info.queryresult.length>0){
        //                     this.cahngeDeviceData(this.state.deviceData.cardid,data.info.queryresult[0].factory,deviceCode,deviceType,true);
        //                 }else{
        //                     suixun.alert('没有查询到考勤卡号：'+this.state.deviceData.cardid+'的类型');
        //                 }
        //             }.bind(this))
        //         }
        //     }.bind(this))
        // }else{
        //     this.cahngeDeviceData(this.state.deviceData.cardid,this.state.cardType,deviceCode,deviceType,true);
        // }

    },
    /**
     * 请求
     */
    cahngeDeviceData: function (oldCardid,oldType,newCardid,newType,type) {
        var data = new FormData();
        data.append("oldCardid",oldCardid);
        data.append("oldType",oldType);
        data.append("newCardid",newCardid);
        data.append("newType",newType);
        suixun.showLoding();//显示加载中
        suixun.ajax(serverUrl+'/deviceManage/singleChangeDevice.json',data,"post",function(data){
            suixun.hideLoding(200);//隐藏加载中
            if(data!=null && data.code == 200){
                suixun.alert("修改成功",function (data) {
                    if(data){
                        this.onClickHidePop();
                        var imei = newCardid;
                        if(type && newType=='13.56'){
                            imei = '8888'+newCardid;
                        }else if(type && newType=='2.4'){
                            imei = '9999'+newCardid;
                        }
                        //this.setState({deviceData:this.state.deviceData})
                        imei = this.state.deviceData.devicetype=='2'?this.state.deviceData.mdtid:imei;
                        window.location.href = './parentDeviceDetails.html?imei='+imei;
                    }
                }.bind(this));
            } else {
                suixun.alert((data!=null && data.msg!=null)?data.msg:"新增失败");
            }
        }.bind(this));
    },
    render: function () {
        var deviceData = this.state.deviceData;
        var babyData = this.state.babyData;
        var paystatus = '未激活',authstatus = '未获取到数据';
        switch(deviceData.paystatus){
            case '2':
                paystatus = '已激活';
                break;
            case '3':
                paystatus = '已缴费';
                break;
            case '4':
                paystatus = '已过期';
                break;
            case '5':
                paystatus = '已回收';
                break;
            default:
                paystatus = '未获取到数据';
                break;
        }
        switch(deviceData.authstatus){
            case 2:
                authstatus = '审核失败';
                break;
            case 3:
                authstatus = '审核成功';
                break;
            case 1:
                authstatus = '审核中';
                break;
        }
        var parentDatas = this.state.parentData.map(function (data,index) {
            if(data.peopleid == data.parentid){
                msgParentid = data.parentid;
            }
            return (
                <div className="baby-list yes-left parent-info">
                    <div className="boby-header-img">
                        <img src="../img/icon/parentHeadImg.png"/>
                    </div>
                    <div className="info">
                        <div className="info-list">
                            <div className="info">
                                <span className="title">身份：</span>
                                <span className="value">{data.familystatus}{data.peopleid==data.parentid?'(管理员)':null}</span>
                            </div>
                            <div className="info">
                                <span className="title">姓名：</span>
                                <span className="value ">{data.peoplename==null?"未获取到数据":data.peoplename}</span>
                            </div>
                            <div className="info">
                                <span className="title">身份证号：</span>
                                <span className="value number">{data.peopleidcard==null?"未获取到数据":data.peopleidcard}</span>
                            </div>
                        </div>
                        <div className="info-list">
                            <div className="info">
                                <span className="title">手机型号：</span>
                                <span className="value ">开发中...</span>
                            </div><div className="info">
                                <span className="title">手机号码：</span>
                                <span className="value ">{data.peopletel==null?"未获取到数据":data.peopletel}</span>
                            </div>
                            <div className="info">
                                <span className="title">地址：</span>
                                <span className="value ">{data.homeaddr==null?"未获取到数据":data.homeaddr}</span>
                            </div>
                        </div>
                    </div>
                </div>
            )
        });
        return (
            <div className="tableManage-body parentDeviceDetails-page">
                <div  className="pop popPhone changeDevice popModel">
                    <div className="model"></div>
                    <div className="pop-info popModel-info addSIM-info">
                        <div className="pop-title popModel-title">
                            <span className="pop-title-content popModel-title-content addSIM-popModel-title-content">
                                <span className="pop-title-content-solid-left popModel-title-content-solid-left" />
                                    新增SIM卡
                                <span className="pop-title-content-solid-right popModel-title-content-solid-right"  />
                            </span>
                            <span className="pop-title-img popModel-title-img" onClick={this.onClickHidePop}><img src="../img/icon/close.png" alt="关闭"/></span>
                            <input type="hidden" name="sim_simids" id="sim_simids" />
                        </div>
                        <div className="popModel-body">
                            <div className="popModel-body-input">
                                <span className="popModel-body-input-title">设备类型</span>
                                <span className="popModel-body-input-content" >
                                    <select className="export-factory" id="deviceType">
                                       <option value="2.4" selected="selected" >2.4</option>
                                       <option value="13.56" >13.56</option>
                                    </select>
                                </span>
                            </div>
                            <div className="popModel-body-input">
                                <span className="popModel-body-input-title">考勤卡号</span>
                                <span className="popModel-body-input-content">
                                    <input className="input-content " maxLength="10" data-error="phone-error" onBlur={this.onBlurInput} id="deviceCode" type="text" placeholder="请输入新的考勤卡号"  />
                                </span>
                                <div className="errorMsg phone-error" ></div>
                            </div>
                        </div>
                        <div className="popModel-button" style={{marginTop:"-35px"}}>
                            <span className="popModel-button-ok" onClick={this.changeDevice.bind(this)}>确定</span>
                        </div>
                    </div>
                </div>
                <header>
                    <div className="header-left">
                        <div className="header-left-studentInfo">设备详情</div>
                    </div>
                    <div className="header-right" onClick={this.synchronousData.bind(this)}>同步数据</div>
                </header>
                <div className="parentDeviceList-body">
                    <div className="baby-list no-right">
                        <div className="info">
                            <div className="info-list">
                                <div className="info">
                                    <span className="title">设备IMEI号：</span>
                                    <span className="value">{deviceData.mdtid==null?'未获取到数据':deviceData.mdtid}</span>
                                </div>
                                <div className="info">
                                    <span className="title">激活日期：</span>
                                    <span className="value number">{deviceData.starttime==null?'未获取到数据':deviceData.starttime}</span>
                                </div>
                                <div className="info">
                                    <span className="title">设备有效期：</span>
                                    <span className="value ">{new Date(deviceData.endtime)<=new Date()?'已过期':deviceData.endtime}</span>
                                </div>
                            </div>
                            <div className="info-list">
                                <div className="info">
                                    <span className="title">设备类型：</span>
                                    <span className="value ">{deviceData.devicetypename==null?'未获取到数据':deviceData.devicetypename}</span>
                                </div>
                                <div className="info">
                                    <span className="title">设备推广价：</span>
                                    <span className="value number">{deviceData.fee==null?'未获取到数据':deviceData.fee}</span>
                                </div>
                                <div className="info">
                                    <span className="title">缴费状态：</span>
                                    <span className="value">{paystatus}</span>
                                </div>
                            </div>
                            <div className="info-list">
                                <div className="info">
                                    <span className="title">设备手机号：</span>
                                    <span className="value">{deviceData.telephone==null?'未获取到数据':deviceData.telephone}</span>
                                </div>
                                <div className="info">
                                    <span className="title">设备套餐：</span>
                                    <span className="value number">{deviceData.fee2==null?'未获取到数据':deviceData.fee2}</span>
                                </div>
                                <div className="info">
                                    <span className="title">缴费类型：</span>
                                    <span className="value">开发中...</span>
                                    {/*<span className="value">线下/线上/智能更换设备缴费继承</span>*/}
                                </div>
                            </div>
                            <div className="info-list">
                                <div className="info">
                                    <span className="title">考勤卡号：</span>
                                    <span className="value number">{deviceData.cardid==null?'未获取到数据':deviceData.cardid}</span>
                                </div>
                                <div className="info">
                                    <span className="title">来电防火墙状态：</span>
                                    <span className="value">{deviceData.firewallstatus==1?'开':'关'}</span>
                                </div>
                                <div className="info">
                                    <span className="title">剩余通讯套餐：</span>
                                    <span className="value">开发中...</span>
                                    {/*天音(流量20M、通话时间120分钟)/移动提示无法查询*/}
                                </div>
                            </div>
                            <div className="info-list">
                                <div className="info">
                                    <span className="title">学校：</span>
                                    <span className="value">{deviceData.schoolname==null?'未获取到数据':deviceData.schoolname}</span>
                                </div>
                                <div className="info">
                                    <span className="title">实名认证状态：</span>
                                    <span className="value">{authstatus}</span>
                                </div>
                                <div className="info">
                                    <span className="title">认证通过时间：</span>
                                    <span className="value number">{deviceData.authTime==null?'未获取到数据':deviceData.authTime}</span>
                                </div>
                            </div>
                            <div className="info-list">
                                <div className="info">
                                    <span className="title">是否零售：</span>
                                    <span className="value">开发中...</span>
                                </div>
                                <div className="info">
                                    <span className="title">批号：</span>
                                    <span className="value number">{deviceData.batchid==null?'未获取到数据':deviceData.batchid}</span>
                                </div>
                                <div className="info">
                                    <span className="title">箱号：</span>
                                    <span className="value number">{deviceData.boxid==null?'未获取到数据':deviceData.boxid}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="column-title">宝贝详情</div>
                    <div className="baby-list yes-left baby-info">
                        <div className="boby-header-img">
                            <img src="../img/icon/studentImg.png"/>
                        </div>
                        <div className="info">
                            <div className="info-list ">
                                <div className="info">
                                    <span className="title">昵称：</span>
                                    <span className="value">{babyData.objectname==null?'未获取到数据':babyData.objectname}</span>
                                </div>
                                <div className="info">
                                    <span className="title">姓名：</span>
                                    <span className="value number">{babyData.studentname==null?'未获取到数据':babyData.studentname}</span>
                                </div>
                                <div className="info">
                                    <span className="title">性别：</span>
                                    <span className="value ">{babyData.sex==null?'未获取到数据':babyData.sex}</span>
                                </div>
                            </div>
                            <div className="info-list ">
                                <div className="info">
                                    <span className="title">学校：</span>
                                    <span className="value ">{babyData.schoolname==null?'未获取到数据':babyData.schoolname}</span>
                                </div>
                                <div className="info">
                                    <span className="title">班级：</span>
                                    <span className="value ">{babyData.grade==null?'未获取到数据':babyData.grade}</span>
                                </div>
                                <div className="info">
                                    <span className="title">学籍号：</span>
                                    <span className="value">{babyData.studentid==null?'未获取到数据':babyData.studentid}</span>
                                </div>
                            </div>
                            <div className="info-list ">
                                <div className="info">
                                    <span className="title">生日：</span>
                                    <span className="value">{babyData.birthday==null?'未获取到数据':babyData.birthday}</span>
                                </div>
                                <div className="info">
                                    <span className="title">身高：</span>
                                    <span className="value number">{babyData.height==null?'未获取到数据':babyData.height}</span>
                                </div>
                                <div className="info">
                                    <span className="title">体重：</span>
                                    <span className="value">{babyData.weight==null?'未获取到数据':babyData.weight}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="column-title">消息管理</div>
                    <div className="baby-list ">
                        <div className="msg-info">
                            <span className="time">开发中...</span>
                            {/*<span className="time">2017-06-15 14:26:52</span>*/}
                            {/*<span className="value">XXX宝贝发出了SOS报警</span>*/}
                        </div>
                        {/*<div className="more">更多消息</div>*/}
                    </div>
                    <div className="column-title">成员管理</div>
                    {
                        parentDatas
                    }
                    {this.state.noData==true?<div className="tableNoDatMsg">{tableNoDataCount}</div>:''}
                    {/*<div className="baby-list yes-left parent-info">*/}
                        {/*<div className="boby-header-img">*/}
                            {/*<img src="../img/icon/parentHeadImg.png"/>*/}
                        {/*</div>*/}
                        {/*<div className="info">*/}
                            {/*<div className="info-list">*/}
                                {/*<div className="info">*/}
                                    {/*<span className="title">爸爸(管理员)：</span>*/}
                                    {/*<span className="value">爸爸(管理员)</span>*/}
                                {/*</div>*/}
                                {/*<div className="info">*/}
                                    {/*<span className="title">姓名：</span>*/}
                                    {/*<span className="value ">张三</span>*/}
                                {/*</div>*/}
                                {/*<div className="info">*/}
                                    {/*<span className="title">身份证号：</span>*/}
                                    {/*<span className="value number">32145620175266912</span>*/}
                                {/*</div>*/}
                            {/*</div>*/}
                            {/*<div className="info-list">*/}
                                {/*<div className="info">*/}
                                    {/*<span className="title">手机信息：</span>*/}
                                    {/*<span className="value ">华为novo2</span>*/}
                                {/*</div>*/}
                                {/*<div className="info">*/}
                                    {/*<span className="title">地址：</span>*/}
                                    {/*<span className="value ">浙江省杭州市西湖区</span>*/}
                                {/*</div>*/}
                                {/*<div className="info">*/}
                                    {/*<span className="title"></span>*/}
                                    {/*<span className="value"></span>*/}
                                {/*</div>*/}
                            {/*</div>*/}
                        {/*</div>*/}
                    {/*</div>*/}
                    {
                        this.state.noData == true?<div className="remove-device" style={{backgroundColor:"#cccccc",cursor: "default"}} >解绑设备</div>:<div className="remove-device" onClick={this.removeDevice.bind(this,deviceData.paystatus)} style={{backgroundColor:"#f44c4c"}}>解绑设备</div>
                        // this.state.noData == true?<div className="remove-device" style={{backgroundColor:"#cccccc",cursor: "default"}} >解绑设备</div>:<div className="remove-device" onClick={this.removeDevice.bind(this,deviceData.paystatus)} style={{backgroundColor:deviceData.paystatus=="3"?"#cccccc":"#f44c4c"}}>解绑设备</div>
                    }
                    {
                        this.state.cardType==''?
                            <div className="remove-device" style={{backgroundColor:"#cccccc",margin:'-50px 0 0 175px',cursor: 'no-drop'}} >更换考勤卡</div>
                            :
                            <div className="remove-device" style={this.state.noData == false?{backgroundColor:"#f44c4c",margin:'-50px 0 0 175px'}:{backgroundColor:"#cccccc",margin:'-50px 0 0 175px'}} onClick={this.showChangeDevicePop.bind(this)} >更换考勤卡</div>
                    }
                </div>
                <footer id="copyright">
                    <span><img src="../img/icon/copyright.png"/>{copyright}</span>
                </footer>
            </div>
        );
    }
});
ReactDOM.render(
    <Main />,
    document.getElementById('tableManage')
);